<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px; padding:0px;}
        #container{width:1000px;height:500px;border:orange solid 1px;margin:40px 0 0 200px;position:relative}
        #box{box-shadow: 4px 4px 4px 0 #ccc;width:680px;font-size:55px;text-align:center;line-height:400px;height:400px;position:relative;border:orangered solid 1px;margin:20px 60px;}
        button{background-color:#666;color:#fff;margin-left:300px;width:100px;height:30px;}
        button:hover{  background-color: #000;}
        #bubble{width:15px;height:15px;
            background-color: red;
            border-radius:50%;
            position:absolute;
            bottom: 12px;
            left:180px;
            box-shadow: 4px 4px 2px 0 #ccc;
        }
        #board{width:150px;height:10px;
            background-color: orange;
            border-radius:5px;
            position:absolute;
            bottom:2px;
            box-shadow:3px 3px 2px 0 #ccc;
            left:160px;
            }
        ul{list-style:none;}
        ul>li{width:66px;height:15px;
            background-color: #069;
        border:solid 1px #ccc;position:absolute; }
        #show{
            position:absolute;
            right:30px;
            top:20px;
            width:200px;
            height:400px;
            border:dotted 1px #888;
            background-color: #333;
        }
        #show span{display:block;
            color:#0f0;
            font-family: "微软雅黑";
            height:30px;
            line-height:30px;
            padding:5px;
        }
        span#info{display:block;font-size:22px;line-height:50px;height:50px;border-bottom:solid 1px #0f0}
        #time, #res, #times, #score{border-bottom:dashed 1px #0f0}
    </style>
</head>
<body>
    <!-- 游戏面板 -->
    <div id="container">
        <!--提示信息 -->
        <div id="show">
            <span id="info">游戏重要信息</span>
            <span>当前时间：</span>
            <span id="time">加载中...</span>
            <span>游戏状态</span>
            <span id="res">加载中...</span>
            <span>挡板打球次数</span>
            <span id="times">加载中...</span>
            <span>游戏得分</span>
            <span id="score">加载中...</span>
        </div>
        <!-- 游戏区域 -->
        <div id="box">
            <!-- 挡板、小球、砖块 -->
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="bubble"></div>
            <div id="board"></div>
        </div>
        <button id="start">开始游戏</button>
    </div>
    <script>
        var _res = document.getElementById("res");// 结果展示
        var _times = document.getElementById("times");// 撞击次数
        var _scores = document.getElementById("score");// 得分
        var _start = document.getElementById("start");// 开始那妞
        var _bubble = document.getElementById("bubble");// 小球
        var _box = document.getElementById("box");// 游戏区域
        var _board = document.getElementById("board");// 挡板
        var _time = document.getElementById("time");// 时间
        var _lis = document.getElementsByTagName("li");// 获取所有的砖块
        // 0. 准备砖块，定位
        var _left;
        var _lefti = 0;
        var _top = 0;
        var _col = Math.floor(_box.offsetWidth / _lis[0].offsetWidth);

        for(var i = 0; i < _lis.length; i++) {
            _lis[i].style.backgroundColor = "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
            _left = _lefti * _lis[0].offsetWidth;
            _lis[i].style.left = _left +"px";
            _lis[i].style.top = _top + "px";
            _lefti ++;
            if(i != 0 && (i+1) % _col == 0){
                _top += _lis[i].offsetHeight;
                _lefti = 0;
            }
        }

        // 1.模块：小球运动
        var _x = 1;
        var _y = -1;
        var _flag = true;
        var _count = 0;
        var _score = 0;
        _res.textContent = "游戏加载完成！";
        _start.onclick = function() {
            _res.textContent = "游戏进行中......"
            if(_flag) {
                _flag = !_flag;
                var timer = setInterval(function() {
                    // 让小球运动
                    _bubble.style.left = _bubble.offsetLeft + _x + "px";
                    _bubble.style.top = _bubble.offsetTop + _y + "px";
                    // 处理右边界
                    if(_bubble.offsetLeft >= _box.offsetWidth - _bubble.offsetWidth) {
                        _x = -1;// 让水平的速度变成负数，就会向相反的方向运动
                    }
                    // 上边界
                    if(_bubble.offsetTop <= 0){
                        _y = 1;
                    }
                    for(var i = 0; i < _lis.length; i++) {
                        // 砖块下边界判断；判断小球是否撞击到li砖块，撞击时，小球运动速度取反；对应的砖块消失
                        if((_bubble.offsetTop == _lis[i].offsetTop + _lis[i].offsetHeight)
                            && (_bubble.offsetLeft > _lis[i].offsetLeft
                                && _bubble.offsetLeft < (_lis[i].offsetLeft + _lis[i].offsetWidth) )){
                            _score++;
                            _scores.textContent = `游戏得分${_score}分`;
                            _lis[i].style.display = "none";
                            _y = 1;
                        }
                        // 砖块左边边界判断
                        if((_bubble.offsetLeft + _bubble.offsetWidth == _lis[i].offsetLeft)
                            && (_bubble.offsetTop < _lis[i].offsetTop+_lis[i].offsetHeight
                                && _bubble.offsetTop > _lis[i].offsetTop)){
                            _score++;
                            _scores.textContent = `游戏得分${_score}分`;
                            _lis[i].style.display = "none";
                            _x = -1;
                        }
                        // 砖块右边界判断
                        if((_bubble.offsetLeft  == _lis[i].offsetLeft + _lis[i].offsetWidth)
                            && (_bubble.offsetTop < _lis[i].offsetTop+_lis[i].offsetHeight
                            && _bubble.offsetTop > _lis[i].offsetTop)){
                            _score++;
                            _scores.textContent = `游戏得分${_score}分`;
                            _lis[i].style.display = "none";
                            _x = 1;
                        }
                        // 砖块上边界判断
                        if((_bubble.offsetTop+_bubble.offsetHeight  == _lis[i].offsetTop)
                            && (_bubble.offsetLeft > _lis[i].offsetLeft
                            && _bubble.offsetLeft < (_lis[i].offsetLeft + _lis[i].offsetWidth) )){
                            _score++;
                            _scores.textContent = `游戏得分${_score}分`;
                            _lis[i].style.display = "none";
                            _y = -1;
                        }
                    }

                    // 左边界
                    if(_bubble.offsetLeft <= 0) {
                        _x = 1;
                    }
                    // 下边界
                    if(_bubble.offsetTop >= _box.offsetHeight - _bubble.offsetHeight){
                        // alert("game over!游戏结束！");
                        _res.textContent = "游戏结束，你失败了！"
                        _box.appendChild(document.createTextNode("GAME OVER！"));
                        clearInterval(timer);
                    }
                    // 挡板挡住小球，边界判断
                    if((_bubble.offsetTop + _bubble.offsetHeight) >= _board.offsetTop
                        && (_bubble.offsetLeft >= _board.offsetLeft && _bubble.offsetLeft <= (_board.offsetLeft + _board.offsetWidth))) {
                        _count++;
                        _times.textContent =`撞击小球${_count}次`;
                        _y = -1;
                    }
                }, 10);
            }
        }

        // 2. 模块：挡板运动
        document.onkeydown = function(e) {
            e =e || window.event;
            console.log(e.keyCode);// 检测得知，方向键左键：37 右键:39

            if(e.keyCode == 37) {
                // 判断当小球刚好在挡板上时，改变运动方向
                /*if((_bubble.offsetTop + _bubble.offsetHeight) == _board.offsetTop){
                    _x = -1;
                }*/
                var _left = _board.offsetLeft - 5;
                if(_left <= 0){
                    _left= 0;
                }
                _board.style.left = _left + "px";
            }
            if(e.keyCode == 39) {
                /*if((_bubble.offsetTop + _bubble.offsetHeight) == _board.offsetTop){
                    _x = 1;
                }*/
                var _right = _board.offsetLeft + 5;
                if(_right >= _box.offsetWidth - _board.offsetWidth){
                    _right = _box.offsetWidth- _board.offsetWidth - 2;
                }
                _board.style.left = _right + "px";
            }
        }

        // 其他辅助信息
        var _t = true;
        if(_t) {
            _t = false;
            setInterval(function() {
                var _date = new Date();
                _time.textContent = `${_date.getFullYear()}/${_date.getMonth()+1}/${_date.getDate()} ${_date.getHours()}:${_date.getMinutes()}:${_date.getSeconds()}`;
            }, 10);
        }
    </script>
</body>
</html>